<template>
<view>
<!--pages/citylist/citylist.wxml-->
<view class="city-body">
  <!-- 搜索城市 -->
  <view class="search-bar">
    <view class="search-row">
      <view class="input-box">
        <image src="/static/images/search.png"></image>
        <input placeholder="请输入城市名称查询" confirm-type="search" @input="inputTap" @confirm="confirmTap" :value="keywords">
        <image src="/static/images/cancel.png" @tap="delTap"></image>
      </view>
      <text @tap="searchCity">搜索</text>
    </view>

  </view>

  <!-- 城市列表 -->
  <view class="list-city" v-if="showCity">
    <scroll-view scroll-y="true" style="height:100%;" :scroll-into-view="scrollTopId" scroll-with-animation="true" enable-back-to-top="true">
      <view class="item">
        <view class="py">当前定位</view>
        <view class="dw-style" :data-citycode="dwcitycode" @tap="dwcity?'selectCity':''" :data-cityname="dwcity">
          <image src="http://imgbdb3.bendibao.com/whbdb/202010/16/20201016150747_37298.png"></image>
          <text>{{dwcity?dwcity:'正在定位'}}</text>
        </view>
      </view>
      <!-- 常用城市 -->
      <view class="item" style="padding-bottom:25rpx;" v-if="isUsualcity">
        <view class="usual">
          <text>常用城市</text>
          <image src="/static/images/ic_search_delete.png" @tap="onDelusualCity"></image>
        </view>
        <view v-for="(item, index) in usualData" :key="index" class="fullname hot-city" :data-citycode="item.citycode" :data-cityname="item.cityname" @tap="selectCity">{{item.cityname}}</view>
      </view>
      <!-- 热门城市 -->
      <view class="item" style="padding-bottom:25rpx;">
        <view class="py" id="hot">★ 热门城市</view>
        <view v-for="(item, index) in hotCity" :key="index" class="fullname hot-city" :data-citycode="item.citycode" :data-cityname="item.cityname" @tap="selectCity">{{item.cityname}}</view>
      </view>

      <!-- 全部 -->
      <view v-for="(group, idx) in cityData" :key="idx" class="item">
        <view class="py" :id="idx">{{idx}}</view>
        <view v-for="(item, index) in group" :key="index" class="fullname" :data-citycode="item.citycode" :data-cityname="item.cityname" @tap="selectCity">{{item.cityname}}</view>
      </view>

    </scroll-view>

    <!-- 首字母 -->
    <view class="city-py" @touchstart="tStart" @touchend="tEnd" catchtouchmove="tMove">
      <view v-for="(item, index) in _py" :key="index" @touchstart="getPy" @touchend="setPy" :id="item">{{item == 'hot' ? "★" : item}}
      </view>
    </view>
  </view>

  <!-- 搜索结果 -->
  <scroll-view scroll-y="true" style="height:100%;" class="searchRes" v-else>
    <view v-if="cityRes!=''">
      <view class="restitle">搜索结果</view>
      <view v-for="(item, index) in cityRes" :key="index" class="fullname" :data-cityname="item.cityname" :data-citycode="item.citycode" @tap="selectCity">{{item.cityname}}</view>
    </view>
    <view class="no-city" v-if="keywords && cityRes==''">
      <image src="http://imgbdb3.bendibao.com/xcx/202011/13/20201113154017_35111.png"></image>
      <text>没有找到相关城市</text>
    </view>
    <!-- <view >没有找到相关城市</view> -->
  </scroll-view>

</view>

<!--选择显示-->
<view :hidden="hidden" class="showPy">{{showPy == 'hot' ? "★" : showPy}}</view>
</view>
</template>

<script>
// pages/citylist/citylist.js
//获取应用实例
const app = getApp();
const util = require("../../utils/util.js");
var QQMapWX = require("../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({
  key: 'KR7BZ-XSQ3P-VGFD7-LNRZL-E7PXE-STF76'
}); // NIQBZ-HL2CS-J3QOV-6BIV5-TFFNE-PFFZY

export default {
  data() {
    return {
      hidden: true,
      citySelected: '深圳',
      city: '深圳',
      showCity: true,
      usualData: [],
      isUsualcity: false // dwcity: wx.getStorageSync('dwcity'),
      // dwcitycode: wx.getStorageSync('dwcitycode')
      ,
      keywords: "",
      dwcity: false,
      dwcitycode: "",
      hotCity: [],
      cityData: [],
      scrollTopId: "",
      _py: [],
      cityRes: [],
      showPy: "",
      pagetype: "",
      Mstart: "",
      historyList: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      pagetype: options.pagetype ? options.pagetype : ''
    });
    util.getUrl(app.globalData.url).then(res => {
      util.cityList().then(res => {
        let allcity = res.allcity;

        let _py = Object.keys(res.cityData);

        let pyarr = ['hot'];

        for (let i of _py) {
          pyarr.push(i);
        }

        this.setData({
          cityData: res.cityData,
          _py: pyarr
        });
        qqmapsdk.reverseGeocoder({
          success: res => {
            let dwcity = res.result.address_component.city;
            let citydata;
            if (dwcity) citydata = allcity.filter(v => {
              if (dwcity.indexOf(v.cityname) != -1) {
                return v;
              }
            });

            if (citydata && Array.isArray(citydata) && citydata[0]) {
              let dwcitycode = citydata[0].citycode;
              uni.setStorageSync("dwcitycode", dwcitycode);
              this.setData({
                dwcity: citydata[0].cityname,
                dwcitycode
              });
            }
          }
        });
      });
      this.getHotCity();
    });
  },

  onShow() {
    if (uni.getStorageSync('usualData')) {
      this.setData({
        usualData: uni.getStorageSync('usualData'),
        isUsualcity: true
      });
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    // 获取热门城市
    getHotCity() {
      util.request('city.php', {
        action: 'hot'
      }, 'GET').then(res => {
        this.setData({
          hotCity: res.data.data
        });
      });
    },

    // 输入事件
    inputTap(e) {
      let keywords = e.detail.value;
      this.setData({
        keywords,
        showCity: false
      });
      util.cityList(keywords).then(res => {
        this.setData({
          cityRes: res.cityRes
        });
      });
    },

    // 输入框回车搜索事件
    confirmTap(e) {
      let keywords = e.detail.value;
      this.setData({
        keywords,
        showCity: false
      });
      util.cityList(keywords).then(res => {
        this.setData({
          cityRes: res.cityRes
        });
      });
    },

    // 点击搜索
    searchCity() {
      this.setData({
        // keywords,
        showCity: false
      });
      util.cityList(this.keywords).then(res => {
        this.setData({
          cityRes: res.cityRes
        });
      });
    },

    // 输入框删除icon事件
    delTap() {
      this.setData({
        keywords: "",
        showCity: true
      });
    },

    //选择城市
    selectCity: function (e) {
      var dataset = e.currentTarget.dataset;
      let usualData = this.usualData;
      this.setData({
        citySelected: dataset.cityname
      });
      uni.setStorageSync('city', dataset.cityname);
      uni.setStorageSync('citycode', dataset.citycode);

      if (this.pagetype == 'index') {
        uni.reLaunch({
          url: '../index/index?city=' + dataset.citycode
        });
      } else {
        uni.reLaunch({
          url: '../bsy/bsy?city=' + dataset.citycode
        });
      }

      if (usualData.length >= 1) {
        if (usualData.findIndex(n => n.citycode == dataset.citycode) < 0) {
          usualData.unshift({
            cityname: dataset.cityname,
            citycode: dataset.citycode
          });
        }
      } else {
        usualData.unshift({
          cityname: dataset.cityname,
          citycode: dataset.citycode
        });
      } //将常用城市数组整体储存到缓存中


      uni.setStorageSync('usualData', usualData);
      this.setData({
        usualData: uni.getStorageSync('usualData')
      });
    },
    touchstart: function (e) {
      this.setData({
        index: e.currentTarget.dataset.index,
        Mstart: e.changedTouches[0].pageX
      });
    },
    touchmove: function (e) {
      var history = this.historyList;
      var move = this.Mstart - e.changedTouches[0].pageX;
      history[this.index].x = move > 0 ? -move : 0;
      this.setData({
        historyList: history
      });
    },
    touchend: function (e) {
      var history = this.historyList;
      var move = this.Mstart - e.changedTouches[0].pageX;
      history[this.index].x = move > 100 ? -180 : 0;
      this.setData({
        historyList: history
      });
    },
    //获取文字信息
    getPy: function (e) {
      this.setData({
        hidden: false,
        showPy: e.target.id
      });
    },
    setPy: function (e) {
      this.setData({
        hidden: true,
        scrollTopId: this.showPy
      });
    },
    //滑动选择城市
    tMove: function (e) {
      var y = e.touches[0].clientY,
          offsettop = e.currentTarget.offsetTop; //判断选择区域,只有在选择区才会生效

      if (y > offsettop) {
        var num = parseInt((y - offsettop) / 12);
        this.setData({
          showPy: this._py[num]
        });
      }

      ;
    },
    //触发全部开始选择
    tStart: function () {
      this.setData({
        hidden: false
      });
    },
    //触发结束选择
    tEnd: function () {
      this.setData({
        hidden: true,
        scrollTopId: this.showPy
      });
    },
    // 清除常用城市事件
    onDelusualCity: function (e) {
      uni.removeStorageSync('usualData');
      this.setData({
        usualData: [],
        isUsualcity: false
      });
    }
  }
};
</script>
<style>
/* pages/citylist/citylist.wxss */

page {
  height: 91.5%;
}

.city-body {
  /* padding-top: 92rpx; */
  box-sizing: border-box;
  height: 100%;
}

/* 定位城市 */

.dw-style {
  display: flex;
  align-items: center;
  padding: 25rpx;
}

.dw-style image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.dw-style text {
  font-size: 30rpx;
  color: #555;
}

/* 搜索城市 */

.search-bar {
  width: 100%;
  height: 110rpx;
  line-height: 100rpx;
  /* margin-top: -100rpx; */
  top: 0;
  box-sizing: border-box;
  overflow: hidden;
  /* background: rgb(59, 63, 68); */
  padding: 20rpx;
  position: relative;
  /* border-bottom: 15rpx solid #eee; */
}

.search-row {
  display: flex;
  align-items: center;
}

.search-row text {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 40rpx;
  color: rgba(20, 20, 20, 1);
  opacity: 1;
  margin-left: 30rpx;
}

.input-box {
  height: 62rpx;
  background: rgba(238, 238, 238, 1);
  opacity: 1;
  border-radius: 32rpx;
  padding: 5rpx 30rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  flex: 1;
}

.input-box image {
  width: 30rpx;
  height: 30rpx;
  margin: 0 10rpx;
}

.input-box input {
  flex: 1;
  height: 62rpx;
}

/* .search-city {
  position: fixed;
  top: 0;
  z-index: 2;
  padding: 15rpx 30rpx;
  background-color: #ff7e2d;
  display: flex;
  align-items: center;
}

.search-city input {
  border-radius: 10rpx;
  background-color: #fff;
  height: 62rpx;
  flex: 1;
  padding: 0 15rpx;
  font-size: 26rpx;
}

.search-city text {
  color: #fff;
  font-size: 35rpx;
  margin-left: 25rpx;
} */

.list-detail, .list-city {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #fff;
}

.list-detail .item-nav {
  border-bottom: 1rpx solid #eee;
}

.list-detail .title, .history .title {
  font-size: 32rpx;
  color: #000;
  line-height: 45rpx;
}

.list-detail .address, .history .address {
  font-size: 28rpx;
  color: #aaa;
  white-space: normal;
}

/* 搜索结果 */

.searchRes .restitle {
  background: #eee;
  font-size: 25rpx;
  color: #aaa;
  padding: 12rpx 25rpx;
}

.citytext {
  box-sizing: border-box;
  font-size: 30rpx;
  color: #555;
  padding: 25rpx;
  border-bottom: 1rpx solid #eee;
}

.no-city {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 255rpx;
}

.no-city image {
  width: 298rpx;
  height: 226rpx;
}

.no-city text {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 40rpx;
  color: rgba(167, 166, 166, 1);
  opacity: 1;
  margin-top: 25rpx;
}

/* 城市列表 */

.list-city {
  position: relative;
}

.py {
  box-sizing: border-box;
  background: #eee;
  font-size: 23rpx;
  color: #aaa;
  padding: 10rpx 25rpx;
}

.usual {
  box-sizing: border-box;
  background: #eee;
  padding: 10rpx 25rpx;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.usual text {
  font-size: 23rpx;
  color: #aaa;
}

.usual image {
  width: 28rpx;
  height: 28rpx;
}

.fullname {
  box-sizing: border-box;
  font-size: 30rpx;
  color: #555;
  padding: 25rpx;
  border-bottom: 1rpx solid #eee;
}

.city-py {
  position: fixed;
  top: 21%;
  right: 0;
  /* margin-top: -360rpx; */
}

.city-py view {
  font-size: 25rpx;
  width: 60rpx;
  height: 37rpx;
  line-height: 37rpx;
  text-align: center;
  /* color: #555; */
  color: #ff7e2d;
}

.showPy {
  width: 150rpx;
  height: 150rpx;
  background: #fff;
  border-radius: 15rpx;
  line-height: 150rpx;
  text-align: center;
  font-size: 80rpx;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 3;
  /* color: #333; */
  color: #ff7e2d;
  box-shadow: 0 0 150rpx rgba(0, 0, 0, 0.35);
}

.hot-city {
  border: 1rpx solid #eee;
  display: inline-block;
  margin: 25rpx 0 0 22rpx;
  padding: 10rpx 0rpx;
  font-size: 25rpx;
  border-radius: 6rpx;
  width: 118rpx;
  text-align: center;
}

</style>